<template>
  <div>
    <p class="font-weight-bold pt-5 pr-5 pl-5">基础样式</p>
    <v-expansion-panels v-model="activeNames" accordion mandatory multiple>
      <v-expansion-panel>
        <v-expansion-panel-header>
          尺寸与位置：
        </v-expansion-panel-header>
        <v-expansion-panel-content>
          <div class="attr-item-edit-wrapper">
            <p class="attr-item-title">快捷定位：</p>
            <div class="sizeAndPosition-wrapper">
              <div
                v-for="item in alignTypeList"
                :key="item.type"
                class="align-type-item"
                @click="changeAlignType(item.type)"
              >
                <v-tooltip bottom>
                  <template v-slot:activator="{ on, attrs }">
                    <v-icon
                      v-bind="attrs"
                      small
                      v-on="on"
                    >
                      mdi-{{ item.icon }}
                    </v-icon>
                  </template>
                  <span v-text="item.title" />
                </v-tooltip>
              </div>
            </div>
          </div>
          <div class="attr-item-edit-wrapper">
            <p class="attr-item-title">尺寸：</p>
            <div class="attr-item-edit-input">
              <v-text-field
                v-model="activeElement.commonStyle.width"
                class="mt-0 pt-0 pr-3"
                hide-details
                type="number"
                label="宽度"
                suffix="px"
              />
            </div>
            <div class="attr-item-edit-input">
              <v-text-field
                v-model="activeElement.commonStyle.height"
                class="mt-0 pt-0 ml-3"
                hide-details
                type="number"
                label="高度"
                suffix="px"
              />
            </div>
          </div>
          <div class="attr-item-edit-wrapper">
            <p class="attr-item-title">快捷调整：</p>
            <div class="sizeAndPosition-wrapper">
              <div class="align-type-item clearFlex" @click="handleResizeClick('wh')">
                <v-tooltip bottom>
                  <template v-slot:activator="{ on, attrs }">
                    <v-icon
                      v-bind="attrs"
                      small
                      v-on="on"
                    >
                      mdi-fullscreen
                    </v-icon>
                  </template>
                  <span>满屏</span>
                </v-tooltip>
              </div>
              <div class="align-type-item clearFlex" @click="handleResizeClick('w')">
                <v-tooltip bottom>
                  <template v-slot:activator="{ on, attrs }">
                    <v-icon
                      v-bind="attrs"
                      small
                      v-on="on"
                    >
                      mdi-arrow-expand-horizontal
                    </v-icon>
                  </template>
                  <span>宽100%</span>
                </v-tooltip>
              </div>
              <div class="align-type-item clearFlex" @click="handleResizeClick('h')">
                <v-tooltip bottom>
                  <template v-slot:activator="{ on, attrs }">
                    <v-icon
                      v-bind="attrs"
                      small
                      v-on="on"
                    >
                      mdi-arrow-expand-vertical
                    </v-icon>
                  </template>
                  <span>高100%</span>
                </v-tooltip>
              </div>
            </div>
          </div>
          <div class="attr-item-edit-wrapper">
            <p class="attr-item-title">位置：</p>
            <div class="attr-item-edit-input">
              <v-text-field
                v-model="activeElement.commonStyle.top"
                class="mt-0 pt-0 ml-3"
                hide-details
                type="number"
                label="X"
              />
            </div>
            <div class="attr-item-edit-input">
              <v-text-field
                v-model="activeElement.commonStyle.left"
                class="mt-0 pt-0 ml-3"
                hide-details
                type="number"
                label="Y"
              />
            </div>
          </div>
          <div class="attr-item-edit-wrapper">
            <p class="attr-item-title">旋转：</p>
            <div class="sizeAndPosition-wrapper">
              <div style="width:100%">
                <v-slider
                  v-model="activeElement.commonStyle.rotate"
                  :min="-180"
                  :max="180"
                  thumb-label
                  @change="throttleAddHistory"
                />
              </div>
            </div>
          </div>
        </v-expansion-panel-content>
      </v-expansion-panel>
      <v-expansion-panel>
        <v-expansion-panel-header>
          边框边距：
        </v-expansion-panel-header>
        <v-expansion-panel-content>
          <div class="attr-item-edit-wrapper">
            <p class="attr-item-title">边框：</p>
            <div class="attr-item-edit-input">
              <v-text-field
                v-model="activeElement.commonStyle.borderWidth"
                class="mt-0 pt-0 mr-3"
                type="number"
                label="尺寸"
                suffix="px"
                @change="throttleAddHistory"
              />
            </div>
            <div class="attr-item-edit-input">
              <v-select
                v-model="activeElement.commonStyle.borderStyle"
                class="mt-0 pt-0 ml-3 mr-3"
                :items="borderStyleList"
                item-text="label"
                item-value="value"
                label="样式"
                @change="throttleAddHistory"
              />
            </div>
            <div class="attr-item-edit-input">
              <v-text-field
                v-model="activeElement.commonStyle.borderColor"
                class="mt-0 pt-0 ml-3"
                label="颜色"
                @change="throttleAddHistory"
                @mousedown="showBorderColorPicker = true"
              />
            </div>
          </div>
          <v-expand-transition>
            <div v-if="showBorderColorPicker" class="attr-item-edit-wrapper">
              <p class="attr-item-title" />
              <div class="sizeAndPosition-wrapper">
                <div style="width:100%">
                  <v-color-picker
                    v-model="activeElement.commonStyle.borderColor"
                    hide-mode-switch
                    hide-inputs
                    @input="throttleAddHistory"
                  />
                </div>
              </div>
            </div>
          </v-expand-transition>
          <div class="attr-item-edit-wrapper">
            <p class="attr-item-title">边框圆弧：</p>
            <div class="sizeAndPosition-wrapper">
              <v-text-field
                v-model="activeElement.commonStyle.borderRadius"
                class="mt-0 pt-0"
                type="number"
                label="圆弧值"
                suffix="px"
                @change="throttleAddHistory"
              />
            </div>
          </div>
          <div class="attr-item-edit-wrapper">
            <p class="attr-item-title">上下边距：</p>
            <div class="attr-item-edit-input">
              <v-text-field
                v-model="activeElement.commonStyle.paddingTop"
                class="mt-0 pt-0 mr-3"
                hide-details
                type="number"
                label="上边距"
                suffix="px"
                @change="throttleAddHistory"
              />
            </div>
            <div class="attr-item-edit-input">
              <v-text-field
                v-model="activeElement.commonStyle.paddingBottom"
                class="mt-0 pt-0 ml-3"
                hide-details
                type="number"
                label="下边距"
                suffix="px"
                @change="throttleAddHistory"
              />
            </div>
          </div>
          <div class="attr-item-edit-wrapper">
            <p class="attr-item-title">左右边距：</p>
            <div class="attr-item-edit-input">
              <v-text-field
                v-model="activeElement.commonStyle.paddingLeft"
                class="mt-0 pt-0 mr-3"
                hide-details
                type="number"
                label="左边距"
                suffix="px"
                @change="throttleAddHistory"
              />
            </div>
            <div class="attr-item-edit-input">
              <v-text-field
                v-model="activeElement.commonStyle.paddingRight"
                class="mt-0 pt-0 ml-3"
                hide-details
                type="number"
                label="右边距"
                suffix="px"
                @change="throttleAddHistory"
              />
            </div>
          </div>
        </v-expansion-panel-content>
      </v-expansion-panel>
      <v-expansion-panel>
        <v-expansion-panel-header>
          阴影样式：
        </v-expansion-panel-header>
        <v-expansion-panel-content>
          <div class="attr-item-edit-wrapper">
            <p class="attr-item-title">阴影位置：</p>
            <div class="attr-item-edit-input">
              <v-text-field
                v-model="boxShadow.h"
                class="mt-0 pt-0 mr-3"
                hide-details
                type="number"
                label="水平阴影位置"
                suffix="px"
                @change="boxShadowChange"
              />
            </div>
            <div class="attr-item-edit-input">
              <v-text-field
                v-model="boxShadow.v"
                class="mt-0 pt-0 ml-3"
                hide-details
                type="number"
                label="垂直阴影位置"
                suffix="px"
                @change="boxShadowChange"
              />
            </div>
          </div>
          <div class="attr-item-edit-wrapper">
            <p class="attr-item-title" />
            <div class="attr-item-edit-input">
              <v-text-field
                v-model="boxShadow.blur"
                class="mt-0 pt-0 mr-3"
                hide-details
                type="number"
                label="模糊距离"
                suffix="px"
                @change="boxShadowChange"
              />
            </div>
            <div class="attr-item-edit-input">
              <v-text-field
                v-model="boxShadow.spread"
                class="mt-0 pt-0 ml-3"
                hide-details
                type="number"
                label="阴影尺寸"
                suffix="px"
                @change="boxShadowChange"
              />
            </div>
          </div>
          <div class="attr-item-edit-wrapper mt-3">
            <p class="attr-item-title">阴影颜色：</p>
            <div class="sizeAndPosition-wrapper">
              <v-text-field
                v-model="boxShadow.color"
                class="mt-0 pt-0"
                label="颜色"
                @change="boxShadowChange"
                @mousedown="showBoxShadowColorPicker = true"
              />
            </div>
          </div>
          <v-expand-transition>
            <div v-if="showBoxShadowColorPicker" class="attr-item-edit-wrapper">
              <p class="attr-item-title" />
              <div class="sizeAndPosition-wrapper">
                <div style="width:100%">
                  <v-color-picker
                    v-model="boxShadow.color"
                    hide-mode-switch
                    hide-inputs
                    @input="boxShadowChange"
                  />
                </div>
              </div>
            </div>
          </v-expand-transition>
        </v-expansion-panel-content>
      </v-expansion-panel>
      <v-expansion-panel>
        <v-expansion-panel-header>
          字体：
        </v-expansion-panel-header>
        <v-expansion-panel-content>
          <div class="attr-item-edit-wrapper">
            <p class="attr-item-title">字体大小：</p>
            <div class="sizeAndPosition-wrapper">
              <div style="width:100%">
                <v-slider
                  v-model="activeElement.commonStyle.fontSize"
                  :min="0"
                  :max="100"
                  thumb-label
                  @change="throttleAddHistory"
                />
              </div>
            </div>
          </div>
          <div class="attr-item-edit-wrapper">
            <p class="attr-item-title">字体粗细：</p>
            <div class="sizeAndPosition-wrapper">
              <div style="width:100%">
                <v-slider
                  v-model="activeElement.commonStyle.fontWeight"
                  :min="300"
                  :max="900"
                  step="100"
                  thumb-label
                  @change="throttleAddHistory"
                />
              </div>
            </div>
          </div>
          <div class="attr-item-edit-wrapper">
            <p class="attr-item-title">行间距：</p>
            <div class="sizeAndPosition-wrapper">
              <div style="width:100%">
                <v-slider
                  v-model="activeElement.commonStyle.lineHeight"
                  :min="0"
                  :max="50"
                  step="0.1"
                  thumb-label
                  @change="throttleAddHistory"
                />
              </div>
            </div>
          </div>
          <div class="attr-item-edit-wrapper">
            <p class="attr-item-title">字间距：</p>
            <div class="sizeAndPosition-wrapper">
              <div style="width:100%">
                <v-slider
                  v-model="activeElement.commonStyle.letterSpacing"
                  :min="0"
                  :max="50"
                  thumb-label
                  @change="throttleAddHistory"
                />
              </div>
            </div>
          </div>
          <div class="attr-item-edit-wrapper">
            <p class="attr-item-title">对齐方式：</p>
            <div class="sizeAndPosition-wrapper">
              <div class="align-type-item clearFlex" @click="handleTextAlignClick('left')">
                <v-tooltip bottom>
                  <template v-slot:activator="{ on, attrs }">
                    <v-icon
                      v-bind="attrs"
                      small
                      v-on="on"
                    >
                      mdi-format-align-left
                    </v-icon>
                  </template>
                  <span>左对齐</span>
                </v-tooltip>
              </div>
              <div class="align-type-item clearFlex" @click="handleTextAlignClick('center')">
                <v-tooltip bottom>
                  <template v-slot:activator="{ on, attrs }">
                    <v-icon
                      v-bind="attrs"
                      small
                      v-on="on"
                    >
                      mdi-format-align-center
                    </v-icon>
                  </template>
                  <span>居中对齐</span>
                </v-tooltip>
              </div>
              <div class="align-type-item clearFlex" @click="handleTextAlignClick('right')">
                <v-tooltip bottom>
                  <template v-slot:activator="{ on, attrs }">
                    <v-icon
                      v-bind="attrs"
                      small
                      v-on="on"
                    >
                      mdi-format-align-right
                    </v-icon>
                  </template>
                  <span>右对齐</span>
                </v-tooltip>
              </div>
            </div>
          </div>
          <div class="attr-item-edit-wrapper mt-3">
            <p class="attr-item-title">字体颜色：</p>
            <div class="sizeAndPosition-wrapper">
              <v-text-field
                v-model="activeElement.commonStyle.color"
                class="mt-0 pt-0"
                label="颜色"
                @change="throttleAddHistory"
                @mousedown="showFontColorPicker = true"
              />
            </div>
          </div>
          <v-expand-transition>
            <div v-if="showFontColorPicker" class="attr-item-edit-wrapper">
              <p class="attr-item-title" />
              <div class="sizeAndPosition-wrapper">
                <div style="width:100%">
                  <v-color-picker
                    v-model="activeElement.commonStyle.color"
                    hide-mode-switch
                    hide-inputs
                    @input="throttleAddHistory"
                  />
                </div>
              </div>
            </div>
          </v-expand-transition>
        </v-expansion-panel-content>
      </v-expansion-panel>
      <v-expansion-panel>
        <v-expansion-panel-header>
          背景&&透明度：
        </v-expansion-panel-header>
        <v-expansion-panel-content>
          <div class="attr-item-edit-wrapper">
            <p class="attr-item-title">背景颜色：</p>
            <div class="sizeAndPosition-wrapper">
              <v-text-field
                v-model="activeElement.commonStyle.backgroundColor"
                class="mt-0 pt-0"
                label="颜色"
                @change="throttleAddHistory"
                @mousedown="showBackgroundColorPicker = true"
              />
            </div>
          </div>
          <v-expand-transition>
            <div v-if="showBackgroundColorPicker" class="attr-item-edit-wrapper">
              <p class="attr-item-title" />
              <div class="sizeAndPosition-wrapper">
                <div style="width:100%">
                  <v-color-picker
                    v-model="activeElement.commonStyle.backgroundColor"
                    hide-mode-switch
                    hide-inputs
                    @input="throttleAddHistory"
                  />
                </div>
              </div>
            </div>
          </v-expand-transition>
          <div class="attr-item-edit-wrapper">
            <p class="attr-item-title">背景图片：</p>
            <div class="attr-item-edit-input">
              <image-select :url.sync="activeElement.commonStyle.backgroundImage" @change="throttleAddHistory" />
            </div>
          </div>

          <div class="attr-item-edit-wrapper">
            <p class="attr-item-title">透明度：</p>
            <div class="sizeAndPosition-wrapper">
              <div style="width:100%">
                <v-slider
                  v-model="activeElement.commonStyle.opacity"
                  :min="0"
                  :max="1"
                  step="0.1"
                  thumb-label
                  @change="throttleAddHistory"
                />
              </div>
            </div>
          </div>
        </v-expansion-panel-content>
      </v-expansion-panel>
    </v-expansion-panels>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { subtract, ceil, divide, throttle } from 'lodash'
import editorProjectConfig from '../../../DataModel'
import ImageSelect from './props-attr/components/image-select'
import $config from '../../../config'

export default {
  components: {
    ImageSelect
  },
  data() {
    return {
      projectConfig: editorProjectConfig.getProjectConfig(),
      showBorderColorPicker: false,
      showBoxShadowColorPicker: false,
      showFontColorPicker: false,
      showBackgroundColorPicker: false,
      activeNames: [0],
      alignTypeList: [{
        title: '左对齐',
        icon: 'format-horizontal-align-left',
        type: 'l'
      }, {
        title: '上对齐',
        icon: 'format-vertical-align-top',
        type: 't'
      }, {
        title: '右对齐',
        icon: 'format-horizontal-align-right',
        type: 'r'
      }, {
        title: '下对齐',
        icon: 'format-vertical-align-bottom',
        type: 'b'
      }, {
        title: '垂直居中对齐',
        icon: 'format-horizontal-align-center',
        type: 'tb'
      }, {
        title: '水平居中对齐',
        icon: 'format-vertical-align-center',
        type: 'lr'
      }],
      borderStyleList: [{
        label: '实线',
        value: 'solid'
      }, {
        label: '虚线',
        value: 'dashed'
      }, {
        label: '点状',
        value: 'dotted'
      }, {
        label: '双线',
        value: 'double'
      }],
      boxShadow: {
        h: 0,
        v: 0,
        blur: 0,
        spread: 0,
        color: '#000000'
      }
    }
  },
  computed: {
    ...mapGetters([
      'projectData',
      'activePageUUID',
      'activeElementUUID',
      'activeAttrEditCollapse',
      'currentPageIndex',
      'activeElementIndex',
      'activeElement',
      'activePage'
    ])
  },
  watch: {
    activeElementUUID() {
      // 设置boxShadow
      this.$nextTick(() => {
        this.initBoxShadowEdit()
      })
    },
    activeNames(val) {
      this.$store.commit('h5editor/updateActiveAttrEditCollapse', val)
    }
  },
  created() {
    this.throttleAddHistory = throttle(this.addHistory, 3000)
  },
  mounted() {
    this.initBoxShadowEdit()
    this.activeNames = this.activeAttrEditCollapse
  },
  methods: {
    /**
			 * 纪录一条历史纪录
			 * */
    addHistory() {
      this.$store.dispatch('h5editor/addHistoryCache')
    },
    /**
			 *
			 * @param type
			 */
    changeAlignType(type) {
      const canvasW = $config.canvasH5Width
      const canvasH = $config.canvasH5Height
      const eleW = this.activeElement.commonStyle.width
      const eleH = this.activeElement.commonStyle.height

      switch (type) {
        case 't':
          this.activeElement.commonStyle.top = 0
          break
        case 'b':
          this.activeElement.commonStyle.top = subtract(canvasH - eleH)
          break
        case 'l':
          this.activeElement.commonStyle.left = 0
          break
        case 'r':
          this.activeElement.commonStyle.left = subtract(canvasW - eleW)
          break
        case 'tb':
          this.activeElement.commonStyle.top = ceil(divide(subtract(canvasH - eleH), 2), 2)
          break
        case 'lr':
          this.activeElement.commonStyle.left = ceil(divide(subtract(canvasW - eleW), 2), 2)
          break
      }
    },
    /**
			 * 初始化阴影编辑对象
			 */
    initBoxShadowEdit() {
      const boxShadow = this.activeElement.commonStyle.boxShadow
      let boxShadowEditConfig = {
        h: 0,
        v: 0,
        blur: 0,
        spread: 0,
        color: '#000000'
      }
      if (!boxShadow || boxShadow === 'none') {
        this.boxShadow = boxShadowEditConfig
        return
      }
      const str = boxShadow.split(' ')

      boxShadowEditConfig = {
        h: parseInt(str[0].replace('px', '')),
        v: parseInt(str[1].replace('px', '')),
        blur: parseInt(str[2].replace('px', '')),
        spread: parseInt(str[3].replace('px', '')),
        color: str[4]
      }
      this.boxShadow = boxShadowEditConfig
    },
    boxShadowChange() {
      const str = `${this.boxShadow.h}px ${this.boxShadow.v}px  ${this.boxShadow.blur}px  ${this.boxShadow.spread}px  ${this.boxShadow.color}`
      this.activeElement.commonStyle.boxShadow = str
    },
    /**
			 * 字体样式设置对齐方式
			 * @param str
			 */
    handleTextAlignClick(str) {
      this.activeElement.commonStyle.textAlign = str
    },
    /**
			 * 字体样式设置对齐方式
			 * @param str
			 */
    handleResizeClick(type) {
      if (type.includes('w')) {
        this.activeElement.commonStyle.left = 0
        this.activeElement.commonStyle.width = $config.canvasH5Width
      }
      if (type.includes('h')) {
        this.activeElement.commonStyle.top = 0
        this.activeElement.commonStyle.height = $config.canvasH5Height
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .align-type-item {
    flex: 1;
    cursor: pointer;
    text-align: center;
    &.clearFlex {
      width: 42px;
      flex: none;
    }
    i {
      line-height: 1;
      display: inline-block;
      padding: 6px;
      border-radius: 4px;
      background: rgba(37, 165, 137, 0.08);
    }
    &:hover {
      i {
        color: white;
        background: #2196F3;
      }
    }
  }
  .attr-item-edit-wrapper {
    padding-left: 18px;
    display: flex;
    width: 100%;
    text-align: center;
    padding-bottom: 10px;
    .attr-item-title {
      text-align: left;
      min-width: 60px;
      font-size: 12px;
      line-height: 30px;
    }
    .sizeAndPosition-wrapper {
      display: flex;
      width: 100%;
    }
    .attr-item-edit-input {
      &.col-2 {
        width: 90px;
        margin-left: 10px;
      }
      &.col-1 {
        width: 250px;
      }
      &.col-3 {
        width: 60px;
        margin-left: 10px;
      }
      &.col-4 {
        width: 50px;
        margin-left: 10px;
      }
      .attr-item-edit-input-des {
        text-align: center;
        line-height: 1;
        margin-top: 2px;
        font-size: 12px;
        color: #9e9e9e;
      }
    }
  }
</style>
